<template>
  <div class="songlyric">
    <img :src="store.songsheets[store.songsindex].al.picUrl" class="bgimg" />
    <van-row class="songlyric-head">
      <van-col span="4" @click="showPopupshut()">
        <div class="iconfont" style="font-size: 0.5rem; margin-right: 0.2rem">&#xe631;</div>
      </van-col>
      <van-col span="16">
        <div>
          <van-notice-bar class="songlyric-head-songname" scrollable :text="store.songsheets[store.songsindex].name" />
        </div>
        <!-- <div class="songlyric-head-singername">{{ store.songsheets[store.songsindex].ar.name }}</div> -->
      </van-col>
      <van-col span="4" @click="share">
        <div class="iconfont" style="font-size: 0.5rem; margin-right: 0.2rem">&#xe60a;</div>
      </van-col>
      <van-share-sheet v-model:show="state.showshare" title="立即分享给好友" :options="options" @select="onselect" />
    </van-row>
    <div class="songlyric-nav" ref="songlyricnav">
      <div v-for="(lyric, index) in store.lyrics" :key="lyric">
        <div
          class="songlyric-nav-text"
          :class="{ active: store.playbacktime * 1000 >= lyric.time && store.playbacktime * 1000 <= lyric.pre }">
          {{ lyric.lyrc }}
        </div>
      </div>
    </div>
    <van-row class="songlyric-section">
      <van-col span="4" offset="1">
        <div class="iconfont" style="font-size: 0.5rem; margin: 0.2rem 0.2rem">&#xe814;</div>
      </van-col>
      <van-col span="4">
        <div class="iconfont" style="font-size: 0.5rem; margin: 0.2rem 0.2rem">&#xe80b;</div>
      </van-col>
      <van-col span="6">
        <img :src="store.songsheets[store.songsindex].al.picUrl" />
      </van-col>
      <van-col span="4">
        <div class="iconfont" style="font-size: 0.5rem; margin: 0.2rem 0.2rem">&#xe7f6;</div>
      </van-col>
      <van-col span="4">
        <div class="iconfont" style="font-size: 0.5rem; margin: 0.2rem 0.2rem">&#xe60a;</div>
      </van-col>
    </van-row>
    <div class="songlyric-progress">
      <!-- <van-progress :percentage="30" /> -->
      <input type="range" min="0" :max="maxtime" v-model="store.playbacktime" step="0.05" />
    </div>

    <van-row class="songlyric-foot">
      <van-col span="4" offset="1">
        <div class="iconfont" style="font-size: 0.6rem; margin: 0.2rem 0.08rem">&#xe618;</div>
      </van-col>
      <van-col span="4" @click="playnext()">
        <div class="iconfont" style="font-size: 0.6rem; margin: 0.2rem 0.08rem">&#xe631;</div>
      </van-col>
      <van-col span="6" @click="plays()">
        <div class="iconfont" style="font-size: 1rem; margin: 0.2rem 0.15rem" v-if="store.judgeplay">&#xe679;</div>
        <div class="iconfont" style="font-size: 1rem; margin: 0.2rem 0.15rem" v-else>&#xe811;</div>
      </van-col>
      <van-col span="4" @click="playprevious()">
        <div class="iconfont" style="font-size: 0.6rem; margin: 0.2rem 00.08rem">&#xe632;</div>
      </van-col>
      <van-col span="4">
        <div class="iconfont" style="font-size: 0.6rem; margin: 0.2rem 0.08rem">&#xe65f;</div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { mapState, mapActions } from "pinia";
import { useStore } from "../../stores/index";
import { reactive, onMounted, getCurrentInstance, watch, ref } from "vue";

export default {
  setup() {
    const store = useStore();
    const state = reactive({
      showshare: false,
      plasysong: "",
      songnav: "",
      // maxsongs: store.lyrics[store.lyrics.length - 1].time + 1000,
    });
    console.log();

    const options = [
      { name: "微信", icon: "wechat" },
      { name: "微博", icon: "weibo" },
      { name: "复制链接", icon: "link" },
      { name: "分享海报", icon: "poster" },
      { name: "二维码", icon: "qrcode" },
    ];

    const onselect = () => {
      //showToast(option.name);
      state.showshare = false;
      //console.log(state.showshare, "2222");
    };
    const share = () => {
      state.showshare = true;
      //console.log(state.showshare, "11111");
    };
    onMounted(() => {
      state.songnav = getCurrentInstance().ctx.$refs;
    });

    // const songlyricnav = ref(null);
    // watch(
    //   () => store.playbacktime,
    //   (a, b) => {
    //     console.log(a, b);
    //     let div = document.querySelector("div.active");
    //     console.log(div.offsetTop, "555555");
    //     console.log(songlyricnav.value, "99999");
    //     if (div.offsetTop > 300) {
    //       console.log(songlyricnav.offsetTop, "99999");
    //       //this.$refs.songlyricnav.offsetTop
    //     }
    //   },
    //   { deep: true }
    // );

    return { store, options, onselect, state, share };
  },

  props: ["showPopupshut", "plays", "playprevious", "playnext", "playtime"],

  data() {
    return {
      maxtime: 0,
    };
  },
  computed: {
    ...mapState(useStore, ["playbacktime", "lyrics", "songsheets"]), //映射函数，取出playbacktime
  },
  methods: {},
  watch: {
    playbacktime: function (a, b) {
      // console.log("a=", a, "b=", b, "9999");
      let div = document.querySelector("div.active");
      // console.log(div.offsetTop, "555555");
      // console.log(this.$refs.songlyricnav.offsetTop, "99999");
      if (div.offsetTop > 250) {
        this.$refs.songlyricnav.scrollTop = div.offsetTop - 250;
      }
    },
    lyrics: function () {
      this.maxtime = (this.lyrics[this.lyrics.length - 1].time + 2000) / 1000;
      console.log(this.maxtime);
    },
    // scrollbar() {
    //   //console.log("a=", a, "b=", b, "9999");
    //   let div = document.querySelector("div.active");
    //   //let div1 = document.querySelector("div.active");
    //   console.log(div.offsetTop, "555555");
    //   console.log(this.$refs.songlyricnav.offsetTop, "99999");
    //   if (div.offsetTop > 300) {
    //     console.log(this.$refs.songlyricnav.offsetTop, "99999");
    //     //this.$refs.songlyricnav.offsetTop
    //   }
    // },
  },
  // watch: {
  //   lyrics: function () {
  //     this.maxtime = (this.lyrics[this.lyrics.length - 1].time + 2000) / 1000;
  //     console.log(this.maxtime);
  //   },
  // },
  //   watch:{
  // songsindex:function(){
  // this.maxtime = this.$refs.
  // }
  //   }
};
</script>

<style lang="less" scoped>
.songlyric {
  width: 100%;
  position: relative;
  .bgimg {
    width: 100%;
    height: 100%;
    position: fixed;
    filter: blur(2.5rem);
    z-index: -1;
  }
  .songlyric-head {
    height: 1rem;
    .songlyric-head-songname {
      //margin: auto;
      //padding-top: 0.1rem;
      //width: 3rem;
      //height: 0.5rem;
      line-height: 1rem;
      font-size: 0.5rem;
      //font-weight: bold;
      text-align: left;
      margin: 0.1rem 0 0 0;
      white-space: nowrap;
      overflow: hidden;
      color: #000;
      background-color: transparent;
    }
    // .songlyric-head-singername {
    //   font-size: 0.05rem;
    //   //height: 0.4rem;
    //   text-align: left;
    //   overflow: hidden;
    //   margin: 0.1 0 0.1rem 0;
    //   white-space: nowrap;
    // }
  }
  .songlyric-nav {
    height: 7.2rem;
    margin: 1rem 0;
    text-align: center;
    overflow: auto;
    .songlyric-nav-text {
      font-size: 0.4rem;
      //height: 1rem;
      //line-height: 1rem;
      margin: 0.2rem;
    }
    .active {
      color: #fff;
      font-size: 0.5rem;
      font-weight: bold;
    }
  }
  .songlyric-section {
    text-align: center;
    height: 1.4rem;
    img {
      margin: 0.3rem 0.5rem;
      width: 0.8rem;
      //line-height: 1.5rem;
      border-radius: 50%;
      float: right;
      // margin: auto;
      border: solid 1px #000;
    }
  }
  .songlyric-progress {
    height: 0.25rem;
    width: 80%;
    margin: 0 10%;
    input {
      width: 100%;
    }
  }
  .songlyric-foot {
    height: 1.5rem;
  }
}
</style>
